<template>
    <div>
        <div class="editable-container">
            <ul contenteditable="true"  ref="editableContainer" @input="changeInput" @keydown="handleKeydown" @paste="handlePaste">
                <li :class="itShow?'move-marker':''" class="editLine" v-for="(item,index) in line" :key="index"  contenteditable="true">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default{
    name:'MyInput',
    data(){
        return{
            itShow:false
        }
    },
    props:{
        line:{
            type:Array,
            default:()=>{
                return [' ']
            }
        },
        hideIt:{
            type:Boolean,
            default:false
        },
        value:{
            type:String,
            default:''
        }
    },
    watch:{
        value(val){
            if(val){
                // this.$nextTick(()=>{
                //     this.$refs.editableContainer.innerHTML = val
                //     this.setCursorToEnd(this.$refs.editableContainer)
                // })
            }
        },
        hideIt:{
            deep:true,
            handler(val){
                this.itShow = val
            }
        }
    },
    created(){
        
    },
    mounted(){
        this.$nextTick(()=>{
            this.$emit('input',this.$refs.editableContainer.innerHTML)
        })
    },
    methods:{
        changeInput(val){
            this.$emit('input',val.target.innerHTML)
        },
        handleKeydown(event){
            this.$emit('InputKeyDown',event)
        },
        handlePaste(event){
            event.preventDefault();
            if(event.clipboardData.types.includes('text/plain') && event.clipboardData.getData('text/plain')){
                const textNode = document.createTextNode(event.clipboardData.getData('text/plain'));
                if(event.target.nodeName == 'BR'){
                    this.$nextTick(()=>{
                        if(event.target.parentNode){
                            event.target.parentNode.appendChild(textNode);
                            event.target.parentNode.focus();
                            this.setCursorToEnd( event.target.parentNode)
                        }
                    })
                }else{
                    event.target.appendChild(textNode);
                    event.target.focus();
                    this.setCursorToEnd(event.target)
                }
               
            }else{
                event.stopPropagation();
            }
            setTimeout(() => {
                this.$nextTick(()=>{
                    this.$emit('input',this.$refs.editableContainer.innerHTML)
                })
            }, 0);
        },
        setCursorToEnd(element) {
            // 创建一个 Range 对象
            const range = document.createRange();
            // 创建一个 Selection 对象
            const selection = window.getSelection();
            // 将 range 的起点和终点设置为元素的最后一个子节点的末尾
            range.selectNodeContents(element);
            range.collapse(false); // 将光标设置在内容的末尾
            // 清空当前 selection 并添加新的 range
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}
</script>

<style lang="less" scoped>
.editable-container{
    max-width:100%;
    min-height:20px;
    padding:10px;
    border:1px solid #f0f0f7;
    border-radius: 5px;
    ul {
      list-style-type: none; /* 去掉默认列表样式 */
      outline:none;
      li {
            position: relative;
            margin-left:10px;
            padding-left:5px;
            margin-bottom:5px;
            max-width:100%;
        }
        li::marker {
            content: '•'; /* 自定义项目符号 */
            color: #000; /* 设置颜色 */
        }
        .move-marker{
            &::marker {
                content: ''; /* 自定义项目符号 */
            }
        }
    }
}
</style>